<template>
  <div class="app-container">
    <h1>查询统计</h1>
    <div class="content">
      <el-form :model="queryForm" ref="queryForm" :inline="true" label-width="100px">
        <el-form-item label="查询条件">
          <el-input v-model="queryForm.keyword" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="queryForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 查询表单
const queryForm = reactive({
  keyword: '',
  dateRange: []
})

// 表格数据
const tableData = ref([
  { id: 1, name: '测试数据1', type: '类型A', date: '2023-01-01', status: '已完成' },
  { id: 2, name: '测试数据2', type: '类型B', date: '2023-01-02', status: '进行中' },
  { id: 3, name: '测试数据3', type: '类型A', date: '2023-01-03', status: '未开始' },
  { id: 4, name: '测试数据4', type: '类型C', date: '2023-01-04', status: '已完成' },
  { id: 5, name: '测试数据5', type: '类型B', date: '2023-01-05', status: '进行中' }
])

// 总条数
const total = ref(5)

// 查询方法
const handleQuery = () => {
  console.log('查询条件:', queryForm)
  // 这里可以添加实际的查询逻辑
}

// 重置查询
const resetQuery = () => {
  queryForm.keyword = ''
  queryForm.dateRange = []
}

// 分页方法
const handleSizeChange = (size) => {
  console.log('每页条数:', size)
  // 这里可以添加分页逻辑
}

const handleCurrentChange = (page) => {
  console.log('当前页:', page)
  // 这里可以添加分页逻辑
}
</script>

<style scoped>
.content {
  padding: 20px;
  font-size: 16px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>